<template>
  <div class="my">
    <div class="container">
      <div class="head"><img class="avatar" :src="detail.avatar || mine_1" alt="">
      <p class="name title_color">{{ detail.username || detail.email }}</p>
      </div>
      <div class="headContainer">
        <div class="headContainer-title">{{t('Total Assets')}}</div>
        <div class="headContainer-value title_color">₹{{ decimalpre(detail.balance || 0) }}</div>
        <div class="headContainer-btns">
          <div class="headContainer-btn-pay" @click="handleFunc('/payBalance')">
            <svg aria-hidden="true" class="icon svg-icon">
              <use xlink:href="#icon-deposit"></use>
            </svg>
            {{t('Deposit')}}
          </div>
          <div class="headContainer-btn-pay" @click="handleFunc('/withdraw')">
            <svg aria-hidden="true" class="icon svg-icon">
              <use xlink:href="#icon-icon-Withdrawal"></use>
            </svg>
            {{t('Withdrawal')}}
          </div>
        </div>
      </div>
      <div class="function-bar">
        <div class="function-nav">
          <div class="function-item" v-for="(item, index) in funcNavList" :key="index" @click="handleFunc(item.path)">
            <div class="function-nav-icon"><img :src="item.icon" alt=""  class="icon"></div>
            <div class="function-nav-text"> {{ item.label }} </div>
          </div>
        </div>
      </div>
      <div class="funContainer">
        <div class="cell" v-for="(item, index) in funcCellList" :key="index" @click="handleFunc(item.path)">
          <div class="cell-label"> {{ t(item.label) }} </div>
          <div class="right-icon">
            <svg aria-hidden="true" class="icon svg-icon">
              <use xlink:href="#icon-my_right"></use>
            </svg>
          </div>
        </div>
      </div>
      <div class="logout" @click="handleLogOut">{{t('Log Out')}}</div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { funcCellList } from '@/components/constant'
import { get } from '@/utils/request'
import { decimalpre } from '@/utils/util'
import mine_1 from '@/assets/images/mine_1.png'
import mine_2 from '@/assets/images/mine_2.png'
import mine_3 from '@/assets/images/mine_3.png'
import mine_4 from '@/assets/images/mine_4.png'
import mine_5 from '@/assets/images/mine_5.png'
import { t } from '@/languages'

const funcNavList = [
  {
    label: t('Daily Trading'),
    path: '/market',
    icon: mine_2
  },
  {
    label: t('OTC Trading'),
    path: '/blockTrading',
    icon: mine_3
  },
  {
    label: t('Quantitative trading'),
    path: '/gather',
    icon: mine_4
  },
  {
    label: t('Initial Public Offerings'),
    path: '/ipo',
    icon: mine_5
  }
]

const $router = useRouter()

function handleFunc(path) {
  $router.push({ path })
}

function handleLogOut() {
  localStorage.clear()
  $router.push({ path: '/login' })
}

const detail = ref(JSON.parse(sessionStorage.getItem('my-info') || '{}'))
async function getUserInfo() {
  try {
    const res = await get(`/api/app/getmyinfo/`, {})
    detail.value = res
    sessionStorage.setItem('my-info', JSON.stringify(res))
  } catch (error) {
    console.log(error)
  }
}

onBeforeMount(getUserInfo)
</script>

<style lang="scss" scoped>
.container {
  padding: .5333rem;
  padding-bottom: 2.1333rem;
}
.head {
  display: flex;
  align-items: center;
  margin-bottom: .5333rem;
}
.head .avatar {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: .4rem;
}

.head .name {
  font-size: .5333rem;
  font-weight: 700;
}

.headContainer {
  background: #122f3a;
  box-shadow: 0 .4267rem .64rem .0533rem rgba(0, 0, 0, .14);
  padding: .6667rem .48rem;
  border: .0267rem solid #2b4e5a;
  border-radius: .2133rem;

  .headContainer-title {
    font-weight: 700;
    color: #f8b253;
    text-align: center;
  }

  .headContainer-value {
    font-size: .74rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    padding: .5333rem 0;
  }
}


.headContainer-btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: .2667rem;
  color: #0d111a;

  .headContainer-btn-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 1.2rem;
    font-weight: 600;
    border-radius: 1.3333rem;
    box-shadow: 0 .1067rem .3733rem 0 rgba(0, 0, 0, .25);
    border: .0267rem solid #325d79;
    background: linear-gradient(270deg, #62f8a2, #fed053);
  }

  .headContainer-btn-withdraw {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 1.2rem;
    font-weight: 600;
    border-radius: 1.3333rem;
    box-shadow: 0 .1067rem .3733rem 0 rgba(0, 0, 0, .25);
    border: .0267rem solid #507b97;
    background: linear-gradient(270deg, #62f792, #63fddb);
  }

  .icon {
    flex-shrink: 0;
    width: .6667rem;
    height: .6667rem;
    margin-right: .2667rem;
  }
}

.function-bar {
  margin-top: .5333rem;
}

.function-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .2667rem;
}

.function-item {
  width: 100%;
  height: 1.0667rem;
  border-radius: .2667rem;
  background: linear-gradient(270deg, #62f792, #63fddb);
  box-shadow: 0 .1067rem .3733rem 0 rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;

  &:last-child {
    .function-nav-text {
      word-break: break-all;
    }
  }
}

.function-nav-icon {
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.function-nav-icon .icon {
  width: .8rem;
  height: .8rem;
}

.function-nav-text {
  flex: 1;
  font-weight: 600;
  color: #0d111a;
  word-break: keep-all;
}

.funContainer {
  margin-top: .5333rem;
  border-radius: .2667rem;
  box-shadow: 0 .1067rem .3733rem 0 rgba(0, 0, 0, .25);
}

.funContainer .cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.3333rem;
  border-bottom: .0533rem solid #c6e9ff;
  line-height: 1.0667rem;
}

.funContainer .cell .cell-label {
  color: #ccc;
  font-size: .4rem;
}

.cell .right-icon {
  display: flex;
  align-items: center;
  justify-content: end;
}

.cell .right-icon .code {
  display: inline-block;
  width: .53333rem;
  height: .8rem;
}

.logout {
  width: 100%;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  border-radius: .1333rem;
  border: .0267rem solid #325d79;
  background: linear-gradient(270deg, #62f792, #63fddb);
  margin-top: .5333rem;
  color: #0d111a;
  font-weight: 600;
}
</style>
